<template>
  <div class="comment">
    <div class="title">
       <h3>发表评论</h3>
      <hr>
      <textarea placeholder="请评论(最多120字)" max-length='120' v-model='msg'></textarea>
      <mt-button type="primary" size="large" @click='postComments()'>发表评论</mt-button>
    </div>
    <div class="cmt-list">
      <div class="cmt-item" v-for="(item,i) in comment" :key = item.id>
        <div class="cmt-title">
          第{{i+1}}楼&nbsp;用户:&nbsp;&nbsp;发表时间：&nbsp;{{item.date|dataFor}}
        </div>
        <div class="cmt-body">
          {{item.msg}}
        </div>
      </div>
      <mt-button @click='addComments' type="danger" size="large" plain >加载更多</mt-button>
    </div>
  </div>
</template>
<script>

var comment = JSON.parse(localStorage.getItem('comment1'));

import {Toast} from 'mint-ui';
export default {
  data(){
    return {
      comment,
      index:1,
      msg:'',
      id: 22,
      storage:[]
    }
  },
  methods:{
    addComments(){
      if(this.index<3){
        this.index++;
        var comment = JSON.parse(localStorage.getItem('comment'+this.index));
        this.comment = this.comment.concat(comment)
      }else {
        Toast('没有内容了哦...')
      }
    },
    postComments(){
      //localtorage能存储，不过还是不如那个远程服务器存储的好啊，不少bug
      var comment = {id:this.id,date:Date.now(),msg:this.msg};
      this.storage.push(comment);
      localStorage.setItem('comment4',JSON.stringify(this.storage));
      this.comment.unshift(comment);
      this.id ++;
    }
  }
}
</script>
<style lang="less" scoped>
  .comment {
    .title {
      h3 {
        font-size: 16px;
      }
      textarea {
        height: 80px;
        margin-bottom: 5px;
        font-size: 14px;
      }
    }
    .cmt-list {
      margin: 5px 0;
      .cmt-item {
        font-size: 13px;
        .cmt-title {
          line-height: 30px;
          background-color: #ccc;
        }
        .cmt-body {
          line-height: 35px;
          text-indent: 2em;
        }
    }
  }
  }
</style>
